<template>
  <div>
    <el-container class="home-container">
      <el-header class="header">
        <el-row>
          <el-col :span="20">
            <h1>Learning Platform</h1>
          </el-col>
          <el-col :span="4" style="display: flex;  justify-content: flex-end;">
            <el-dropdown @command="handleCommand">
              <div class="welcome">欢迎您,{{this.userinfo.name}}</div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <el-avatar :size="50" :src="this.userinfo.picture"></el-avatar>
          </el-col>
        </el-row>
      </el-header>

      <el-container style="height: 800px">
        <el-aside width="200px">
          <el-menu :default-active="this.activeMenu" class="el-menu-vertical-demo" @select="getIndex">
            <el-menu-item index="MyTask">
              <i class="el-icon-s-grid"></i>
              <span>我的任务</span>
            </el-menu-item>
            <el-menu-item index="TerminalList">
              <i class="el-icon-monitor"></i>
              <span>终端列表</span>
            </el-menu-item>
            <el-menu-item index="ResourceWare">
              <i class="el-icon-upload"></i>
              <span>资源仓库</span>
            </el-menu-item>
            <el-menu-item index="UserInfo">
              <i class="el-icon-user"></i>
              <span>个人信息</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main>
          <div>
            <component v-bind:is="this.activeMenu" v-bind:props="componentProps"></component>
          </div>
        </el-main>
      </el-container>


      <el-footer>
        <div>
          <el-divider content-position="center">Copyright ©️ 2023-present Learning Platform <el-link href="http://beian.miit.gov.cn/" target="_blank" >鄂ICP备2022008212号-1</el-link></el-divider>
        </div>
      </el-footer>
    </el-container>

    <el-dialog
        title="Learning Platform"
        :visible.sync="dialogVisible"
        width="30%"
        >
      <span>是否确定退出登录？</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="logout">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import MyTask from "@/views/myTask/index.vue";
import ResourceWare from "@/views/ResourceWare/index.vue";
import TerminalList from "@/views/TerminalList/index.vue";
import UserInfo from "@/views/UserInfo/index.vue";
import {getUserInfo, logout} from "@/api/home";
export default {
  name:'HomeIndex',
  props: {
    componentProps: Object
  },
  components: {
    MyTask,
    ResourceWare,
    TerminalList,
    UserInfo
  },
  data() {
    return {
      activeMenu: 'MyTask',
      userinfo:{},
      dialogVisible: false
    }
  },
  methods:{
    //点击确定退出登录
    logout(){
      logout().then(()=>{
        this.$router.push('/login')
      })
    },
    handleCommand(){
      this.dialogVisible=this

    },
    getIndex(index){
      this.activeMenu=index
    },
    getUserInfo(){
      getUserInfo().then(res=>{
        this.userinfo=res.data
      })
    }
  },
  created() {
    this.getUserInfo()
    //接收组件传值
    this.bus.$on('update', user=> {
      this.userinfo= user
    })
  }
}
</script>

<style scoped>
.home-container{
  height: 100%;
}
.header {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
}
.welcome{
  margin-top: 15px;
  margin-right: 20px;
  font-size: 18px;
}
</style>
